<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="js/axios.js"></script>

    <style>
      div,
      span,
      img,
      input,
      button {
        margin: 0;
        padding: 0;
      }
      .cleaning {
        display: flex;
      }
      .totalclean {
        cursor: pointer;
      }
      .cart {
        width: 200px;
        float: left;
        text-align: center;
        margin-right: 30px;
      }
      .cart > img {
        width: 200px;
        height: 200px;
      }
      .cart > span {
        font-size: 20px;
        cursor: pointer;
      }
      .cart > .num {
        width: 50px;
        height: 20px;
        text-align: center;
        display: inline-block;
        font-size: 20px;
      }
      .clean {
        width: 100px;
        height: 30px;
        background-color: red;
        color: #000;
        display: block;
        margin: 0 auto;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div class="cleans">
      全选：<input type="checkbox" class="checkAll" />总价：<span
        class="totalprice"
        >0</span
      >
      <input type="button" value="全部消费" class="totalclean" />
    </div>
    <div class="box">
      <!-- <div class="cart">
        <input type="checkbox" />
        <img src="../images/adidasi.webp" alt="" />
        <div class="desc">我是一只小小鸟</div>
        <div class="price">13元</div>
        <span class="down">-</span>
        <div class="num">33</div>
        <span class="up">+</span>
        <input type="button" value="结算" class="clean" />
      </div> -->
    </div>
    <script>
      //修改
      function change(pid, num) {
        axios
          .get("http://jx.xuzhixiang.top/ap/api/cart-update-num.php", {
            params: {
              uid: 134063,
              pid: pid,
              pnum: num,
            },
          })
          .then((res) => {
            console.log(res);
          });
      }
      //获取
      // let gain = function foo() {
      //   axios.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
      //     params: {
      //       id: 134063,
      //     },
      //   });
      // };
      // console.log(gain.axios);
      // gain.then((res) => {
      //   console.log(res);
      // });
      // console.log(gain());
      let oBox = document.querySelector(".box");
      let checkbox = document.querySelector("input");
      function buzhidao() {
        axios
          .get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
            params: {
              id: 134063,
            },
          })
          .then((res) => {
            console.log(res.data.data);
            let productlist = res.data.data;
            let str = "";
            productlist.forEach((item) => {
              str += `
            <div class="cart" data-id="${item.pid}">
        <input type="checkbox" class="check"/>
        <img src="${item.pimg}" alt="" />
        <div class="desc">${item.pdesc}</div>
        <div class="price">${item.pprice}</div>
        <span class="down">-</span>
        <input type="text" class="num" value="${item.pnum}"></input>
        <span class="up">+</span>
        <span class="delete">删除</span>
        <div class="pertotalprice">${item.pnum * item.pprice}</div>
        <input type="button" value="结算" class="clean" />
      </div>
          `;
            });
            oBox.innerHTML = str;

            class Cart {
              constructor() {
                this.check();
                this.updata();
              }
              check() {
                this.checkAll = document.querySelector(".checkAll");

                this.cks = document.querySelectorAll(".check");
                this.checkAll.checked = true;
                for (let i = 0; i < this.cks.length; i++) {
                  this.cks[i].checked = true;
                }
                this.checkAll.onclick = () => {
                  for (let i = 0; i < this.cks.length; i++) {
                    this.cks[i].checked = this.checkAll.checked;
                  }
                };
                for (let i = 0; i < this.cks.length; i++) {
                  this.cks[i].onclick = () => {
                    let len = this.cks.length;
                    let cklen =
                      document.querySelectorAll(".check:checked").length;
                    if (len == cklen) {
                      this.checkAll.checked = true;
                    } else {
                      this.checkAll.checked = false;
                    }
                    this.updata();
                  };
                }
                this.minus = document.querySelectorAll(".down");
                this.plus = document.querySelectorAll(".up");
                this.nums = document.querySelectorAll(".num");
                this.perTotalPrice =
                  document.querySelectorAll(".pertotalprice");
                this.totalPrice = document.querySelector(".totalprice");
                this.delete = document.querySelectorAll(".delete");
                this.perPrice = document.querySelectorAll(".price");
                this.lists = document.querySelectorAll(".cart");
                for (let i = 0; i < this.lists.length; i++) {
                  this.minus[i].onclick = () => {
                    let pid = this.lists[i].getAttribute("data-id");

                    // let changeNum = ;

                    change(pid, --this.nums[i].value);
                    buzhidao();
                    this.updata();
                  };
                  this.plus[i].onclick = () => {
                    let pid = this.lists[i].getAttribute("data-id");

                    let changeNum = ++this.nums[i].value;

                    change(pid, changeNum);
                    buzhidao();
                    this.updata();
                    // window.location.reload();
                  };
                  this.nums[i].onchange = () => {
                    let pid = this.lists[i].getAttribute("data-id");
                    let changeNum = this.nums[i].value;
                    change(pid, changeNum);
                    buzhidao();
                    this.updata();
                  };
                  this.delete[i].onclick = () => {
                    let pid = this.lists[i].getAttribute("data-id");

                    axios.get(
                      "http://jx.xuzhixiang.top/ap/api/cart-delete.php",
                      {
                        params: {
                          uid: 134063,
                          pid: pid,
                        },
                      }
                    );
                    buzhidao();
                    this.updata();
                  };
                }
              }
              updata() {
                let sum = 0;
                for (let i = 0; i < this.lists.length; i++) {
                  if (this.cks[i].checked) {
                    sum += this.nums[i].value * this.perPrice[i].innerText;
                  }
                }
                this.totalPrice.innerText = sum;
              }
            }
            let cart = new Cart();
          });
      }
      buzhidao();
    </script>
  </body>
</html>
